<template>
  <div class="wrap">
    <el-form :model="smsForm" size="mini" ref="smsForm" :rules="rules">
      <el-form-item label="短信模板："  class="mb30" :required="true" :show-message="false">
        <el-select v-model="template" placeholder="选择短信模板" filterable size="mini"  @change="templateSelect" class="w495 mr20 turnBlock f_l">
          <el-option v-for="item in templateList" :key="item.thirdTemplateId" :label="item.templateName" :value="item.id"></el-option>
        </el-select>
        <el-button class="cancelButton mr20 turnBlock f_l" @click="refreshTemplate">刷新</el-button>
      </el-form-item>
      <el-form-item label="短信内容：" class=" mb30 txt" :required="true" :show-message="false">
        <div class="w706 flex" v-html="smsContent">
         
        </div>
      </el-form-item>
      <el-form-item label="测试发送：" prop="testReceiver" class=" flex phone labelMarginLeft5 mb60">
        <el-input class="w495 mr20" v-model="smsForm.testReceiver" placeholder="输入测试发送手机号" maxlength="11" oninput="value=value.replace( /[^\d]/g,'')" clearable></el-input>
        <el-button class="searchButton" @click="sendTestMessage">发送</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 自动化营销-----发短信组件
import { isEmail,isMobile } from "@/utils/validate";
export default {
  name: "sms",
  components: {},
  data() {
    return {
      //表单规则
      smsForm: {
        tempId:"",
        params:{

        },
        previewContent:"",
        templateName:"",
        testReceiver:""
      },
      template:"",
      templateContent:"",
      smsContent: null,
      //form规则
      rules: {
      },
      templateList:[],
      params:[],
    };
  },
  props: {
    id:Number,
    nodeInfo: {
      type: Object,
    },
    journeyId: {
      type: String,
      default: '',
    }
  },
  methods: {
    /**
     * 将编辑的数据回调页面
     */
    saveSendSmsData(data) {
      this.$emit("saveSendSmsData",data);
    },
    /**
     * 校验手机正确性
     */
    checkTestPhone(vue){
      if(!isMobile(vue)){
        this.$message({message:"请输入正确的手机号", type:"error"});
        this.smsForm.testReceiver = "";
        return false;
      }
    },
    /**
     * 测试发送
     */
    sendTestMessage(){
      let that = this;
      if(this.smsForm.tempId =="" || this.smsForm.tempId == null){
        that.$message({message:"请选择短信模版输入参数后进行测试发送",type:"error"})
        return false;
      }
      if(this.smsForm.testReceiver == null || this.smsForm.testReceiver == "" ){
        that.$message({ message: "请输入测试手机号", type: "error" });
        return false
      }
      if(!isMobile(this.smsForm.testReceiver)){
        this.$message({message:"请输入正确的手机号", type:"error"});
        this.smsForm.testReceiver = "";
        return false;
      }
      if(that.params.length > 0){
        for(var i=0;i<that.params.length;i++){
          var key = that.params[i];
          that.smsForm.params[key] = document.getElementById(key).value;
          if(that.smsForm.params[key]==null || that.smsForm.params[key]=='' ){
            that.$message({ message: "请输入第"+ Number(i+1)+"个参数", type: "error" });
            return false;
          }
        }
      }
      that.smsForm.type = 1;
      this.utils.request.sendTestMessage(that.smsForm, res => {
        if (res.code == "0000") {
          if(res.data.code == "0"){
            that.$message({ message: res.data.message, type: "success" });
          }else{
            that.$message({ message: res.data.message, type: "error" });
          }
        }
      });
    },
    /**
     * 模板选择
     */
    templateSelect(val){
        let item = null;
      this.templateList.forEach(sms=>{
        if(sms.id == val){
          // this.smsInfo = sms;
          item = sms;
        }
      })
      if(item == null){
          this.$message({
            type:"error",
            message: "模板不存在"
          })
          return false;
      }
    //   this.template = item.templateName;
      this.smsForm.templateName = item.templateName;
      this.templateContent = item.templateContent;
      this.smsForm.tempId = item.thirdTemplateId;
      var content = item.templateContent;
      var reg="${(.*?)}";
      var textList = content.split(/\$\{[^}]+\}/);
      var paramList = content.match(/\$\{[^}]+\}/g);
      this.params = [];
      this.smsForm.params = {};
      if(paramList != null){
        for(var i=0;i<paramList.length;i++){
          this.params.push(paramList[i].replace("${","").replace("}",""));
          this.smsForm.params[paramList[i].replace("${","").replace("}","")] = "";
          content= content.replace(paramList[i],'&nbsp;&nbsp;<textarea class="textareaParm" type="text" id="'+paramList[i].replace("${","").replace("}","")+'"></textarea>&nbsp;&nbsp;');
        }
      }
      this.smsContent = content;
    },
    
    /**
     * 保存短信节点
     */
    getPreview(){
      let that = this;
      if(that.smsForm.tempId =="" || that.smsForm.tempId == null){
        that.$message({message:"请选择短信模版",type:"error"})
        return null;
      }
      //判断参数是否全部输入
      if(that.params.length > 0){
        for(var i=0;i<that.params.length;i++){
          var key = that.params[i];
          that.smsForm.params[key] = document.getElementById(key).value;
          if(that.smsForm.params[key]==null || that.smsForm.params[key]=='' ){
            that.$message({ message: "请补全短信参数", type: "error" });
            return null;
          }
        }
      }
      
      //短信预览数据组装
      var paramList = this.templateContent.match(/\$\{[^}]+\}/g);
      var content = this.templateContent;
      if(paramList != null && paramList.length > 0){
        for(var i=0;i<paramList.length;i++){
          var key = paramList[i].replace("${","").replace("}","");
          content= content.replace(paramList[i],this.smsForm.params[key]);
        }
      }
      this.smsForm.previewContent = content;

      return this.smsForm;
      //调用接口保存数据
    //   let branchNodeInfo = {
    //     nodeTemplateCode: this.nodeInfo.templateCode,
    //     nodeVariable: this.smsForm,
    //     nodeTemplateId: this.nodeInfo.id,
    //     id: this.nodeInfo.nodeId,
    //   }

    //   that.utils.request.updateBranchNode(branchNodeInfo,res=>{
    //       if(res.code == '0000'){
    //         that.$message({message:"保存成功",type:"success"});
    //         that.$emit("saveLabelData",{nodeName:this.template});
    //         that.$emit("handleClose", false);
    //       }
    //   })
    },
    /**
     * 刷新模版
     */
    refreshTemplate(){
      this.tTempalteListAll();
    },
    /**
     * 查询短信邮件模板
     */
    tTempalteListAll(callbackData){
      //查询短信
      this.utils.request.tTempalteListAll({status: 1, templateType: 1},res=>{
          if(res.code == '0000'){
            this.templateList = res.data;

            if(callbackData != null){
                //回显短信
                let item = null;
                this.templateList.forEach(template=>{
                    if(template.thirdTemplateId == callbackData.tempId){
                        item = template;
                    }
                })
                this.template = item.id +"";
                this.templateSelect(item.id);
                this.$nextTick(()=>{
                    //设置输入框值
                    if(this.params.length > 0){
                        for(var i=0;i<this.params.length;i++){
                            var key = this.params[i];
                            document.getElementById(key).value = callbackData.params[key];
                        }
                    }
                })
                that.smsForm = callbackData;
            }
          }else{
            this.templateList = []
          }
      })
    },
  },

  mounted() {
    this.tTempalteListAll();
  },
  created() {
    
  }
};
</script>
<style lang="scss" scoped>
.el-checkbox {
  margin-right: 30px;
}
/deep/ .el-form {
  .txt {
    /deep/ .el-form-item {
      margin-top: 0px;
    }
    .flex {
      line-height: 3;
      padding: 15px;
      border: 1px solid #dcdfe6;
      border-radius: 4px;
    }
    .el-textarea {
      width: auto;
    }
  }
  .phone {
    .el-form-item__content {
      display: flex;
      justify-content: flex-start;
    }
  }
  .textareaParm{
    -webkit-appearance: none;
    background-color: #FFF;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #DCDFE6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
  }
}

.font20{
  font-size: 20px !important;
}
/deep/ .w194{
  width: 194px !important;
  .el-input__inner{
    width: 194px  !important;
  }
}
.noMarginRight{
  margin-right: 0 !important;
}
.labelMarginLeft5{
  /deep/ .el-form-item__label{
    margin-left: 10px;
  }
}
/deep/ .w495{
  width: 443px !important;
  .el-input__inner{
    width:443px !important;
  }
}
/deep/ .w605{
  width: 605px !important;
  .el-input__inner{
    width:605px !important;
  }
}
.noMarginLeft{
  margin-left: 0 !important;
}
/deep/ .copyBtn{
  border: 1px solid #0079DC !important;
  border-radius: 16px !important;
  background-color: #409EFF !important;
  color: #fff !important;
}
.mr10{
  margin-right: 10px !important;
}
.desc{
  color: #c4c4c4;
  font-size: 14px;
}
.w706{
  width: 648px !important;
}
.w738{
  width: 738px !important;
}
</style>

